<template>
  <a-modal
    :title="category.label"
    :width="800"
    :maskClosable="false"
    v-model="visible"
    @ok="handleOk"
  >
    <a-form :form="form">
      <a-form-item
        label="属性名"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="[
            'name',
            {initialValue:attribute.name,rules: [{ required: true, message: '请输入属性名' }]}
          ]"
          placeholder="输入属性名"
        />
      </a-form-item>

      <a-form-item
        label="是否开启"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-radio-group
          v-decorator="[
            'enable',
            {initialValue: attribute.enable},
          ]"
        >
          <a-radio :value="true">开启</a-radio>
          <a-radio :value="false">禁用</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="销售属性"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-radio-group
          v-decorator="[
            'sale',
            {initialValue: attribute.sale},
          ]"
        >
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="序号"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input-number
          :min="0"
          :max="10000"
          v-decorator="[
            'orderNum',
            {initialValue: attribute.orderNum},
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { attributeSave, attributeUpdate } from '@/api/product'

export default {
  name: 'AttributeModal',
  components: {},
  data () {
    return {
      visible: false,
      attribute: {},
      category: {},
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleEdit (category, record) {
      this.form.resetFields()
      this.attribute = record
      this.category = category
      this.visible = true
    },
    handleCreate (category) {
      this.form.resetFields()
      this.category = category
      this.attribute = {
        enable: true,
        orderNum: 0,
        sale: true
      }
      this.visible = true
    },

    // handler
    handleOk () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = { ...values }
          params.categoryId = _this.category.categoryId
          params.id = this.attribute.id
          console.log('params:{}: ', params)
          if (!params.id) {
            attributeSave(params).then(res => {
              if (res.status === 0) {
                _this.$message.success('保存成功')
                this.visible = false
                _this.$emit('ok')
              } else {
                _this.$message.success(res.msg)
              }
            })
          } else {
            attributeUpdate(params).then(res => {
              if (res.status === 0) {
                _this.$message.success('保存成功')
                this.visible = false
                _this.$emit('ok')
              } else {
                _this.$message.success(res.msg)
              }
            })
          }
        }
      })
    }
  },

  created () {},
  watch: {}
}

</script>
